<template>
  <div class="vehicleVersionDetail h100">
    <full-parent-dom-with-dask :loading="loadingDetail"></full-parent-dom-with-dask>
    <div class="vehicleVersionDetailTop">
      <!-- 车型信息 -->
      <detail class="modelInfo" title="carModelInfo">
        <DetailItem :label="$t('modelName')" :content="info.modelName"  />
        <DetailItem :label="$t('modelCode')" :content="info.modelCode"  />
        <DetailItem :label="$t('stereotype')" :content="info.trimLevel"  />
        <DetailItem :label="$t('carSeriesName')" :content="info.brandName"  />
      </detail>
      <detail class="versionInfo" title="versionDetail" :items="versionDetailConfig" :data="info">
        <template #releaseNoteContent>
          <a @click="viewReleaseNote">{{ $t('view') }}</a>
        </template>
        <!-- 智驾域版本 -->
        <template #name>
          <detail-item :label="versionType==='TEST' ? '测试智驾域版本' : '正式智驾域版本' " :content="info.name ? info.name : '-'" />
        </template>
        <!-- 车辆版本  -->
        <template #gcyVehicleVersion>
          <detail-item :label="versionType==='TEST' ? '测试车辆版本' : '正式车辆版本' " :content="info.gcyVehicleVersion ? info.gcyVehicleVersion : '-'" />
        </template>
        <template #isApproval>
          <detail-item v-if="versionType === 'PROD'" :label="$t('isApproval')" :content="$t(info.approved ? 'ApproveYes' : 'ApproveNo')" />
        </template>
      </detail>
    </div>
    <!-- 零件配置标题 -->
    <div class="vehicleVersionDetailEcuVersionConfigHeader">
      <h4 class="withVerticleLineT4 title12">{{ $t('ecuVersionConfig') }}</h4>
    </div>
    <!-- 零件配置列表 -->
    <div class="vehicleVersionDetailEcuVersionConfigLists">
      <view-ecu-version-config :ecuVersionLists="ecuVersions" ref="ecuVersionConfigRef"></view-ecu-version-config>
    </div>
    <!-- 发布说明弹框组件 -->
    <view-release-note
      ref="releaseNoteRef"
      :width="600"
      :releaseNotes="info.releaseNotes || {}"
      :is-edit="false"
    ></view-release-note>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import ViewEcuVersionConfig from './ViewEcuVersionConfig'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import ViewReleaseNote from '@/views/components/ViewReleaseNote'
import EditItem from '@/components/EditItem'
import DetailItem from '@/components/detail/detailItem'
import Detail from '@/components/detail'

const initInfo = {
  // 车型名称
  modelName: '',
  // 车型代码
  modelCode: '',
  // 车系名称
  brandName: '',
  // 版型
  trimLevel: '',
  // 车辆版本
  name: '',
  enabled: null,
  approved: null,
  releaseNotes: null

}
export default {
  components: {
    Detail,
    DetailItem,
    EditItem,
    TableEllipsis,
    ViewEcuVersionConfig,
    FullParentDomWithDask,
    ViewReleaseNote
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    versionType: {
      type: String,
      default: ''
    },
    time: {
      type: Number,
      default: 789520
    }
  },
  data () {
    return {
      loadingDetail: false,
      // 详情信息
      info: { ...initInfo },
      // 零件版本配置
      ecuVersions: [],
      versionDetailConfig: [
        {
          key: 'name',
          slot: true

        },
        {
          key: 'gcyVehicleVersion',
          slot: true

        },
        {
          key: 'code',
          slot: true

        },
        {
          key: 'releaseNote',
        },
        {
          key: 'isApproval',
          slot: true
        }
      ]
    }
  },
  watch: {
    time: {
      handler () {
        this.getDetailData()
      },
      immediate: true
    }
  },
  methods: {
    // 查看发布说明
    viewReleaseNote () {
      this.$refs.releaseNoteRef.toggleVisible(true)
    },
    getDetailData () {
      this.resetData()
      if (!this.id) {
        return
      }
      this.loadingDetail = true
      this.$store.dispatch('getVehicleVersionDetailData', { id: this.id, versionType: this.versionType }).then(res => {
        const data = res.data
        if (data) {
          this.info = {
            modelName: data.model ? data.model.name : '-',
            modelCode: data.model ? data.model.code : '-',
            brandName: data.model ? data.model.brandName : '-',
            trimLevel: data.model ? data.model.trimLevel : '-',
            name: data.name,
            code: data.code,
            enabled: data.enabled,
            approved: data.approved,
            gcyVehicleVersion: data.gcyVehicleVersion,
            releaseNotes: {
              description: data.description,
              functionAddition: data.functionAddition,
              functionOptimization: data.functionOptimization,
              acknowledgements: data.acknowledgements,
              functionDi6Info: data.functionDi6Info
            }
          }
          this.ecuVersions = data.ecuVersions.map((item, index) => {
            return {
              ecuId: item.ecuId || index,
              partName: item.ecu ? item.ecu.name : '-',
              showEcuId: item.ecuModuleId || '-',
              versionName: item.version ? item.version.name : '-',
              softwareCode: item.softwareCode,
              configVersionName: item.version ? item.version.configVersionName : '-',
              groupNo: item.groupNo || '-',
              groupRollback: item.groupRollback,
              groupUpgradeNo: item.groupUpgradeNo || '-',
              versionType: item.version.versionType,
              version: item.version,
              patchPackageCount: item.version ? item.version.patchPackageCount : 0,
              wholePackageCount: item.version ? item.version.wholePackageCount : 0,
              releaseNotes: item.version ? {
                description: item.version.description,
                functionAddition: item.version.functionAddition,
                functionOptimization: item.version.functionOptimization,
                acknowledgements: item.version.acknowledgements
              } : null
            }
          })
          console.log(this.ecuVersions, 'this.ecuVersions')
        }
      }).finally(() => {
        this.loadingDetail = false
      })
    },
    resetData () {
      this.info = { ...initInfo }
      this.ecuVersions = []
    }
  }
}
</script>
<style scoped lang="less">
.vehicleVersionDetail {
    display: flex;
    flex-direction: column;
    padding: @drawerContentPt @drawerPr @drawerContentPb @drawerPl;
    .vehicleVersionDetailTop {
      flex: none;
    }
    .vehicleVersionDetailEcuVersionConfigHeader {
        flex: none;
        padding-bottom: @drawerContentPt;
    }
    .vehicleVersionDetailEcuVersionConfigLists {
        flex: 1 0 0;
        min-height: 220px;
    }
}
</style>
